<template>
	<!-- 页面根容器 -->
	<view :style="{
      width: '100%',
      backgroundImage: `url(${jgbjURL})`,
      backgroundSize: 'cover',
      alignItems: 'center',
      // paddingLeft: isTablet ? '60rpx' : '30rpx',
      // paddingTop: isTablet ? '60rpx' : '30rpx',
      fontSize: '10rpx',
      animation: 'fadeIn 0.8s ease-in-out'
    }">
		<!-- 内容区域 -->
		<view class="container">
			<!-- 显示标题区域 -->
			<view class="ShowTitle">
				<view class="ShowTitle-1" @click="rotateTitlea" :class="{'rotateda': rorareda}">
					提交时间：2025-03-28 10.58
				</view>
				<view class="ShowTitle-2" @click="rotateTitleb" :class="{'rotatedb': roraredb}">
					用时 3分23秒
				</view>
			</view>
		</view>

		<!-- 分数区域 -->
		<view class="Score">
			<view class="ScoreTitle" :style="{ backgroundImage: `url(${BlueURL})` }">
				因子得分
			</view>
			<view class="ScoreLast">
				<view style="text-indent: 1em;">总分</view>
				<view>88.00</view>
			</view>
		</view>

		<!-- 测评结果展示区域 -->
		<view class="Third-div">
			<view class="ResultTitle" :style="{ backgroundImage: `url(${BlueURL})` }">
				测评结果
			</view>
			<view class="Result">
				<view class="bgk1">
					<view class="ZongFen" number-of-lines="1">总分</view>
					<view class="bgk2">
						<psychologyEchar></psychologyEchar>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				BlueURL: this.$baseURL + '/profile/upload/2025/05/10/Blue_20250508100002A087_20250510150725A056.png',
				jgbjURL: this.$baseURL + '/profile/upload/2025/05/10/jgbj_20250507101024A028_20250510150221A029.png',
				rorareda: true,
				roraredb: true,
				isTablet: uni.getSystemInfoSync().windowWidth >= 768 // 判断是否为平板尺寸
			};
		},
		methods: {
			rotateTitlea() {
				this.rorareda = !this.rorareda;
			},
			rotateTitleb() {
				this.roraredb = !this.roraredb;
			}
		},
		onLoad() {
			// 监听窗口尺寸变化，实时调整布局
			uni.onWindowResize((res) => {
				this.isTablet = res.size.windowWidth >= 768;
			});
		}
	};
</script>

<style>
	/* 全局样式 */
	p {
		font-size: 28rpx;
		color: #333;
	}

	/* 页面容器 */
	.container {
		max-width: 678px;
		margin: 0 auto;
	}

	/* 顶部信息栏 */
	.ShowTitle {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	/* 时间显示模块 */
	.ShowTitle-1,
	.ShowTitle-2 {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		animation: fadeIn 1s ease-in-out;
		transition: transform 1s;
	}

	.ShowTitle-1 {
		width: 65%;
		background: #d5e6f8;
		color: #2e8ee4;
		border-radius: 20rpx 0 0 20rpx;
	}

	.ShowTitle-2 {
		width: 35%;
		background: #47a0f2;
		color: #ffffff;
		border-radius: 0 20rpx 20rpx 0;
	}

	/* 旋转动画 */
	.ShowTitle-1.rotateda,
	.ShowTitle-2.rotatedb {
		transform: rotateY(360deg);
	}

	/* 分数板区域 */
	.Score {
		width: 100%;
		max-width: 1024rpx;
		background-color: #ffffff;
		padding: 30rpx;
		margin: 40rpx auto;
		/* margin-bottom: 30rpx; */
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		animation: fadeIn 1s ease-in-out;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.Score:hover {
		transform: scale(1.01);
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
	}

	/* 分数标题栏 */
	.ScoreTitle {
		height: 80rpx;
		line-height: 80rpx;
		font-weight: bold;
		padding-left: 60rpx;
		background-repeat: no-repeat;
		background-size: 28rpx 28rpx;
		background-position: 20rpx center;
		margin-bottom: 30rpx;
		color: #000000;
		font-size: 26rpx;
	}

	/* 总分数栏 */
	.ScoreLast {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f3f8fe;
		padding: 20rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #444;
		box-shadow: inset 0 0 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 结果分析区域 */
	.Third-div {
		width: 100%;
		max-width: 1024rpx;
		background-color: #ffffff;
		padding: 30rpx;
		margin: 0 auto 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
		animation: fadeIn 1.2s ease-in-out;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.Third-div:hover {
		transform: scale(1.02);
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
	}

	/* 测评结果标题栏 */
	.ResultTitle {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-weight: bold;
		padding-left: 60rpx;
		background-repeat: no-repeat;
		background-size: 28rpx 28rpx;
		background-position: 20rpx center;
		margin-bottom: 30rpx;
		color: #000000;
		font-size: 26rpx;
	}

	/* 结果文字容器 */
	.Result {
		width: 100%;
		background-color: #f4faff;
		padding: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		line-height: 1.8;
		color: #333;
	}

	/* 总分标签样式 */
	.ZongFen {
		display: inline-block;
		padding: 12rpx 24rpx;
		background-color: #6bb8fe;
		color: #fff;
		border-radius: 24rpx 0rpx;
		font-size: 26rpx;
		line-height: 1;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 分析文字部分容器 */
	.bgk1 {
		background-color: #f3f8fe;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 30rpx;
		animation: fadeIn 1.4s ease-in-out;
	}

	/* 雷达图区域容器 */
	.bgk2 {
		background: linear-gradient(to left bottom, #e0f7ff, #ffffff);
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		height: 600rpx;
		animation: zoomIn 1s ease-in-out;
	}

	/* 动画关键帧 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(2rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes zoomIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	/* 平板尺寸适配 */
	@media (min-width: 768px) {

		/* 调整字体单位为px，避免在平板上过大 */
		.ShowTitle-1,
		.ShowTitle-2,
		.ScoreTitle,
		.ResultTitle {
			font-size: 16px;
		}

		.ScoreLast,
		.Result,
		.ZongFen {
			font-size: 16px;
		}

		/* 调整容器宽度和间距 */
		.Score,
		.Third-div {
			padding: 40rpx;
			border-radius: 16rpx;
		}

		.Result,
		.bgk1,
		.bgk2 {
			border-radius: 24rpx;
		}

		/* 调整雷达图高度 */
		.bgk2 {
			height: 700rpx;
		}
	}

	/* 大屏平板适配 */
	@media (min-width: 1024px) {
		.bgk2 {
			height: 800rpx;
		}
	}
</style>